<template>
  <el-dialog
    :title="$t('提示')"
    :visible.sync="showPwdDialog"
    :before-close="handleClose"
    class="my-dialog__wrapper cer-dialog-wrap"
  >
    <div class="cer-dialog-content">
      <div class="items-center">
        <el-form
          :model="formData"
          ref="formData"
          label-width="0"
          class="demo-ruleForm"
          @submit.native.prevent
        >
          <p class="item-title">{{ $t("姓名") }}</p>
          <el-form-item
            prop="phone"
            :rules="[{ required: true, message: $t('姓名不能为空') }]"
          >
            <el-input
              :placeholder="$t('请输入姓名')"
              v-model="formData.phone"
            ></el-input>
          </el-form-item>
          <p class="item-title">{{ $t("身份证") }}</p>
          <div>
            <el-form-item
              :rules="[{ required: true, message: $t('身份证不能为空') }]"
              prop="code"
            >
              <el-input
                v-model="formData.code"
                :placeholder="$t('请输入身份证')"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="showPwdDialog = false">{{ $t("取 消") }}</el-button>
      <el-button type="primary" @click="certification">{{
        $t("认 证")
      }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import api from "@/api/personcenter";
export default {
  data() {
    return {
      formData: {
        phone: "",
        code: "",
      },
      showPwdDialog: false,
    };
  },

  methods: {
    certification() {
      this.$refs["formData"].validate(async (valid) => {
        if (valid) {
          let res = await this.$http.put(
            `${api.certification}?idNumber=${this.formData.code}&name=${this.formData.phone}&idType=`
          );
          if (res && res.code == 0) {
            this.$message.success(this.$t("设置成功"));
            this.$emit("initCertification");
            this.showPwdDialog = false;
          } else {
            this.$message.error(res.msg || this.$t("网络错误"));
          }
        }
      });
    },
    handleClose(done) {
      this.$confirm(this.$t("确认关闭？"))
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    show() {
      this.formData = {
        phone: "",
        code: "",
      };
      this.showPwdDialog = true;
    },
  },
};
</script>
<style lang="scss">
.cer-dialog-content {
  padding: 1rem 7rem;
  .item-title {
    font-size: 0.89rem;
    margin-bottom: 0.89rem;
  }
}
</style>
